<template>
  <h1>管理疗程</h1>
  <el-collapse accordion>
      <el-collapse-item v-for="(treatment, index) in treatments" :title="treatment.title" :name="index">
          <el-descriptions column="1" size="large" style="margin-left: 30px">
              <el-descriptions-item label="用户邮箱">{{ treatment.user_email }}</el-descriptions-item>
              <el-descriptions-item label="用户姓名">{{ treatment.user_name }}</el-descriptions-item>
          </el-descriptions>
          <el-card v-for="teeth in treatment.teeths" style="margin-bottom: 30px; margin-left: 30px; margin-right: 30px; background: #ddecec">
              <template #header>
                  <div class="card-header">
                      <h3 style="margin-top: 0; margin-bottom: 0; color: grey; text-align: start">
                          {{ teeth.name }}
                      </h3>
                  </div>
              </template>
              <el-descriptions column="2" size="default" border>
                  <el-descriptions-item label="id">{{ teeth.id }}</el-descriptions-item>
                  <el-descriptions-item label="时间">{{ teeth.time }}</el-descriptions-item>
                  <el-descriptions-item label="类别">{{ teeth.type }}</el-descriptions-item>
                  <el-descriptions-item label="详情">
                      <el-button
                              type="primary"
                              style="font-size: 14px; padding-left: 0; padding-right: 0"
                              @click="openTeethDetailPage(teeth.id)"
                              text>
                          查看详情
                      </el-button>
                  </el-descriptions-item>
              </el-descriptions>
          </el-card>
      </el-collapse-item>
  </el-collapse>
    <el-button
        type="primary"
        style="margin: auto; margin-top: 30px"
        @click="openNewTreatPage"
    >
        新建疗程
    </el-button>
    <TeethDetailPage
        :visible=teeth_detail_visible
        :id=id
        @close="closeTeethDetailPage">
    </TeethDetailPage>
  <NewTreatPage
    :visible=new_treat_visible
    @close="closeNewTreatPage"
    @create_success="createSuccess"
  >
  </NewTreatPage>
</template>

<script>
import TeethDetailPage from "@/components/TeethDetailPage.vue";
import TeethTreatPage from "@/components/TeethTreatPage.vue";
import NewTreatPage from "@/components/NewTreatPage.vue";
import axios from "axios";

export default {
    name: "DentistTreatment",
    components: {NewTreatPage, TeethTreatPage, TeethDetailPage},
    data() {
        return {
            teeth_detail_visible: false,
            new_treat_visible: false,
            id: 1,
            treatments: [
                {
                    title: '疗程1',
                    user_email: 'moc85422729@163.com',
                    user_name: '许文冲',
                    teeths: [
                        {
                            name: 'teeth1',
                            id: 1,
                            time: '2023-04-16',
                            type: '上牙'
                        }
                    ]
                },
                {
                    title: '疗程2',
                    user_email: 'moc85422729@163.com',
                    user_name: '许文冲',
                    teeths: [
                        {
                            name: 'teeth2',
                            id: 2,
                            time: '2023-04-16',
                            type: '下牙'
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        openTeethDetailPage: function (id) {
            this.id = id
            this.teeth_detail_visible = true
        },
        closeTeethDetailPage: function () {
            this.teeth_detail_visible = false
        },
        openNewTreatPage: function () {
            this.new_treat_visible = true
        },
        closeNewTreatPage: function () {
            this.new_treat_visible = false
        },
        createSuccess: function () {
            this.closeNewTreatPage()
            this.getData()
        },
        getData: function () {
            const _this = this
            axios.get(process.env.VUE_APP_BASEURL + "treatment/treatmentByDentist?email=" + _this.$store.state.username).then(function (resp) {
                _this.treatments = resp.data.data
            })
        }
    },
    mounted() {
        this.getData()
    }
}
</script>

<style scoped>
h1 {
    font-size: 30px;
}
/deep/ .el-collapse-item__header{
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
}
</style>